<script setup lang="ts">
import type { VersionProps } from '@/types';

import { computed } from 'vue';

import { ElRadio, ElText } from 'element-plus';

defineOptions({
  name: 'RadioVersion',
});
const { checkedValue, item } = defineProps<{
  checkedValue: string;
  item: VersionProps;
}>();
const emits = defineEmits(['update:checkedValue', 'compare', 'delete']);
const onCompare = (e: Event, item: VersionProps) => {
  emits('compare', e, item);
};
const onDelete = (e: Event, item: VersionProps) => {
  emits('delete', e, item);
};
const checked = computed({
  get: () => checkedValue,
  set: (val) => emits('update:checkedValue', val),
});
</script>
<template>
  <ElRadio v-model="checked" :label="item.name" :value="item.id" />

  <div class="btns">
    <ElText
      class="hover:text-blue-500"
      size="small"
      @click="($event: Event) => onCompare($event, item)"
    >
      比较
    </ElText>
    <ElText
      class="hover:text-red-500"
      size="small"
      @click="($event: Event) => onDelete($event, item)"
    >
      删除
    </ElText>
    <ElPopover placement="right" width="300">
      <template #reference>
        <ElText class="hover:text-blue-500" size="small"> 详情 </ElText>
      </template>
      <p>{{ item.date }}</p>
      <p>{{ item.remark }}</p>
    </ElPopover>
  </div>
</template>
